<template>
	<view class="zone">
		<u-navbar :is-back="false" :height="60" :background="background" :border-bottom="false">
			<view class="slot-wrap">
				<view class="nav-bar2">
					<u-icon class="back" size="20px" color="#fff" @click="$p.back()" name="arrow-left"></u-icon>
					<view class="n_left">
						 <h3>西游宝石</h3>
						 <text @click="$p.navto('/pages/invitebox/stonealog')">宝石记录</text>
					</view>
				</view>
			</view>
		</u-navbar>


		<view class="mian">
			<view class="box">
				<view class="left">
					<image src="http://img.cpgm.cc/panda/static/public/stone.jpg" mode="widthFix" />
					<view class="word">
						<text>宝石数量</text>
						<text>{{userinfo.jewel}}</text>
					</view>
				</view>
				<view class="button" @click="show = true">兑换</view>
			</view>
			<view class="botbox">
				<p class="title">宝石说明</p>
				<view class="line"></view>
				<view class="b_con">
					<view class="tiao">
						<view>1</view>
						<p>西游宝石类似App的“股份”</p>
					</view>

					<view class="tiao">
						<view>2</view>
						<p>平台宝石总数为200万枚，永不增发,估值1元~无上限</p>
					</view>

					<view class="tiao">
						<view>3</view>
						<p>宝石是游戏里非常稀有的道具，平台在达到一定规模后会进行回购操作</p>
					</view>

					<view class="tiao">
						<view>4</view>
						<p>比特币刚开始也是不到一分钱，参与的人多，后来涨到最高点50万元一枚</p>
					</view>

					<view class="tiao">
						<view>5</view>
						<p>按平台可见的增长人数速度，预计这天很快到来</p>
					</view>
					<p class="bp">趁现在还在红利期，赶紧邀请你的小伙伴参与</p>
				</view>
			</view>
		</view>

		<!-- 宝石兑换 -->
		<u-mask :show="show">
			<view class="warp">
				<view class="exchange">
					<view class="m_tit">兑换零钱</view>
					<view class="line"></view>
					<view class="i_box">
						<text>宝石</text>
						<view class="line2"></view>
						<input type="number" @input="inputchange" v-model="num" placeholder="请输入宝石数量">
					</view>
					
					<view class="i_box">
						<text>零钱</text>
						<view class="line2"></view>
						<input type="number" v-model="num" placeholder="0.00">
					</view>

					<view class="button btn" @click="exchange">兑换</view>
				</view>
				<image class="close" @click="show = false" src="http://img.cpgm.cc/panda/static/feed/cha.png" mode="widthFix" />
			</view>
		</u-mask>



		<!-- 确定开宝箱弹窗 -->
		<u-mask :show="sureshow">
			<view class="warp">
				<view class="surebox">
					<view class="m_tit">确认兑换</view>
					<view class="m_con">确定使用<text>{{num}}</text>宝石兑换<text>{{num}}</text>元吗？</view>
					<view class="m_btn">
						<view class="button cancel" @click="sureshow = false">我在想想 </view>
						<u-button :plain="true" :hair-line="false" hover-class="none" :throttle-time="1000" @click="exchangefn" class="button confirm" >确认兑换</u-button>
					</view>
				</view>
			</view>
		</u-mask>


	</view>
</template>

<script>
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#000',
				},
				show:false,
				sureshow:false,
				num:'',
				userinfo: uni.getStorageSync('userinfo'),
			};
		},
		onLoad(){
			this.getUserInfo();
		},
		methods: {
			// 获取个人信息
			getUserInfo(){
				this.$getUserInfo.getUserInfo((res)=>{
					if(res.code == 1) {
						this.userinfo = res.data
					}
				})
			},	

			exchange(){
				this.show = false
				this.sureshow = true

				
			},
			exchangefn(){
				if(this.num == '' || this.num == null) {
					this.$u.toast('请输入宝石数量')
				}else {
					this.$u.toast('即将正式上线！')
				}
			},
			inputchange(e){
				e.target.value = e.target.value.replace(/^0|[^\d]|[.]/g, '')
				this.$nextTick(() => {
					this.num = e.target.value
				});
			},
		},
	}
</script>

<style lang="less">

.zone {
	background: #000;
	min-height: 100vh;
}

.nav-bar2 {
	width: 100%;
	display: flex;
	align-items: center;
	justify-content: space-between;
	min-height: 60px;
	padding: 0px 10px;
}
	.n_left {
		width: 100%;
		display: flex;
		align-items: center;

		h3 {
			color: #fff;
			font-size: 25px;
		}
		text {
			position: absolute;
			right: 10px;
			color: rgba(255, 255, 255, 0.8);
			font-size: 12px;
			margin-left: 5px;
		}
		// image {
		// 		width: 35%;
		// 		margin-left: 5px;
		// 	}
	}

	.shouxu {
		color: #fff;
		font-size: 14px;
	}

.mian {

}

.box {
	background: #FFFFFF;
	border-radius: 7px;
	padding: 12px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	margin: 10px;

	.left {
		display: flex;
		align-items: center;

		image {
			width: 35px;
			margin-right: 10px;
		}
		.word {
			display: flex;
			flex-direction: column;
			text:nth-child(1) {
				color: #343434;
				font-size: 12px;
			}
			text:nth-child(2) {
				font-size: 20px;
				font-weight: bold;
				margin-top: 10px;
				color: #fff;
				line-height: 24px;
				text-shadow: 0px 2px 5px rgba(254,80,93,0.2);
				background: linear-gradient(180deg, #FF456B 0%, #FE5C4F 100%);
				-webkit-background-clip: text;
				-webkit-text-fill-color: transparent;
			}
		}
	}

	.button {
		width: 72px;
		height: 33px;
		background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
		color: #fff;
	}

}

.botbox {
	height: calc(100vh - 154px);
	background: linear-gradient(180deg, #FFE6E0 0%, #FFFFFF 100%);
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
	border-radius: 18px 18px 0px 0px;
	padding: 20px;
	box-sizing: border-box;
}

.title {
	color: #343434;
	font-size: 16px;
	font-weight: 600;
}

.line {
	width: 100%;
	height: 1px;
	background: rgba(0,0,0,0.1);
	margin: 20px 0;
}

.tiao {
	display: flex;
	align-items: center;
	margin-top: 15px;

	view {
		width: 16px;
		height: 16px;
		background: linear-gradient(180deg, #FF9889 0%, #FF644E 100%);
		color: #fff;
		display: flex;
		align-items: center;
		justify-content: center;
		border-radius: 50%;
		margin-right: 5px;
	}

	p {
		color: #000;
		font-weight: 600;
		font-size: 13px;
	}

	
}
.bp {
		font-size: 12px;
		padding-left: 22px;
		margin-top: 5px;
	}



.exchange {
	background: #000000 linear-gradient(180deg, #FAD9BF 0%, #FFFFFF 100%);
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
	border-radius: 18px;
	padding: 20px;
}

.m_tit {
	color: #000;
	font-size: 18px;
	font-weight: 600;
}

.i_box {
	background: #fff;
	padding: 10px;
	display: flex;
	align-items: center;
	border-radius: 5px;	
	margin-bottom: 12px;

	text {
		width: 20%;
		text-align: center;
		color: #000;
		font-size: 12px;
	}
	.line2 {
		width: 1px;
		height: 31px;
		background: #000000;
		border-radius: 5px;
		opacity: 0.1;
		margin: 0 10px;
	}

	input {
		flex: 1;
		font-size: 14px;
	}
}


.btn {
	height: 50px;
	background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
	border-radius: 5px;
	width: 80%;
	color: #fff;
	margin: 0 auto;
	margin-top: 20px;
}

.close {
	width: 30px;
	margin-top: 20px;
	position: relative;
	left: 50%;
	transform: translateX(-50%);
}




// 确定开宝箱
.surebox {
	background: #FFFFFF;
	box-shadow: 0px 2px 4px 0px rgba(0,0,0,0.1);
	border-radius: 18px;
	padding: 20px;
}

.m_tit {
	color: #000000;
	text-align: center;
	font-size: 20px;
	font-weight: 600;
}

.m_con {
	color: #696969;
	font-weight: 600;
	text-align: center;
	margin: 30px 0;
	text {
		color: #000000;
	}
}

.m_btn {
	display: flex;
	align-items: center;
	justify-content: space-between;

	.button {
		width: 45%;
		height: 50px;
	}

	.cancel {
		background:  #EAEAEA;
		border-radius: 5px;
		color: #000000;
		font-size: 14px;
		font-weight: 600;
	}

	.confirm {
		background: linear-gradient(270deg, #FF456B 0%, #FE5C4F 100%);
		border-radius: 5px;
		color: #fff;
	}
}


</style>
